<script setup lang="ts">
import ItemMusic from '@/components/ItemMusic/index.vue'
import APIDetails from '@/api/details'
import PaginationAlbum from '@/components/PaginationAlbum/index.vue'

const $router = useRouter()

const $route = useRoute()

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 8
})
const loading = shallowRef<boolean>(false)

watch($route, (newValue) => {
    if (newValue.params.id) {
        getSetlist()
    }
}, { immediate: true })

const list = ref<any[]>([])

const total = shallowRef<number>(0)

const category = ref<any>({})

const keys = ref<any>([])


function getSetlist() {
    const data = {
        id: $route.params.id,
        category_type: 'Music'
    }
    loading.value = true
    APIDetails.getSetlist(queryParams.value, data).then(({ data, total: count }) => {
        keys.value = data.key
        list.value = data.list
        category.value = data.category
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}


const musicListRef = ref<any>([])

function clearMusic() {
    musicListRef.value.forEach((item: any) => {
        item.handleSuspend()
    })
}

function onPlay(index: number) {
    clearMusic()
    musicListRef.value[index].onPlay()
}

function handleJumpSearch(key: string) {
    window.open($router.resolve(`/music-search?q=${key}`).href, '_blank')
}

</script>

<template>
    <div class="music-gather" v-loading="loading">
        <div class="introduce">
            <div class="bg">
                <img v-if="category.image" :src="category.image" alt="img">
            </div>
            <div class="content">
                <div class="left">
                    <img v-if="category.image" :src="category.image" alt="img">
                </div>
                <div class="right">
                    <div class="name">{{ category.title }}</div>
                    <div class="tags">
                        <div class="tag" v-for="item in keys" @click="handleJumpSearch(item)">{{ item }}</div>
                    </div>
                    <div class="text">共收录<span>{{ total }}</span>首音乐</div>
                </div>
            </div>
        </div>
        <el-empty description="暂无内容" v-if="!list || list?.length == 0" />
        <div class="list">
            <ItemMusic v-for="(item, index) in list" :key="item.id" :item="item" ref="musicListRef"
                @on-play="onPlay(index)" />
        </div>
        <div class="pagination">
            <PaginationAlbum :total="total" v-model:current-page="queryParams.page" :page-size="queryParams.limit"
                @get-list="getSetlist" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.music-gather {

    .pagination {
        margin: 0 auto;
        width: 1260px;
        margin-top: 30px;
    }

    .list {
        border-radius: 5px;
        background-color: #ffffff;
        position: relative;
        width: 1260px;
        margin: 0 auto;
        z-index: 5;
    }

    .introduce {
        height: 300px;
        position: relative;
        overflow: hidden;

        .content {
            position: absolute;
            top: 48px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            width: 1160px;

            .right {
                margin-left: 62px;

                .text {
                    color: rgba(255, 255, 255, 1);
                    font-size: 14px;
                    margin-top: 18px;

                    span {
                        color: #3785F2;
                    }
                }

                .tags {
                    display: flex;
                    gap: 0 18px;
                    margin-top: 15px;

                    .tag {
                        padding: 0 10px;
                        height: 21px;
                        line-height: 21px;
                        border-radius: 5px;
                        background-color: rgba(255, 255, 255, 0.3);
                        color: rgb(255, 255, 255);
                        font-size: 14px;
                        text-align: center;
                        cursor: pointer;
                    }
                }

                .name {
                    color: rgba(255, 255, 255, 1);
                    font-size: 28px;
                }
            }

            .left {
                width: 200px;
                height: 200px;
                background-color: #eeeeee;
                border-radius: 5px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    border-radius: 5px;
                }
            }
        }

        .bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 300px;
            filter: blur(20px);
            background-color: #858585;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}
</style>